<template>
  <section class="bx broadcast">
    <div class="broadcast-title">
      <h3>相关直播推荐</h3>
      <span>你已经被我一个人包围</span>
    </div>
    <div class="broadcast-room">
      <div class="broadcast-to">
        <div class="broadcast-info">
          <span class="live">
            <i class="small-dots"></i>
            直播中
          </span>
          <img  src="https://img1.img.9xiu.com/upload/roomimg_web/2021/02/03/75239211174226g018xf45om_317x317.jpg" alt="">
        </div>
      </div>
      <div class="broadcast-to">
        <div class="broadcast-info">
          <span class="live">
            <i class="small-dots"></i>
            直播中
          </span>
          <img  src="https://img1.img.9xiu.com/upload/roomimg_web/2021/02/03/75239211174226g018xf45om_317x317.jpg" alt="">
        </div>
      </div>
      <div class="broadcast-to">
       <div class="broadcast-info">
          <span class="live">
            <i class="small-dots"></i>
            直播中
          </span>
          <img  src="https://img1.img.9xiu.com/upload/roomimg_web/2021/02/03/75239211174226g018xf45om_317x317.jpg" alt="">
        </div>
      </div>
      <div class="broadcast-to">
        <div class="broadcast-info">
          <span class="live">
            <i class="small-dots"></i>
            直播中
          </span>
          <img  src="https://img1.img.9xiu.com/upload/roomimg_web/2021/02/03/75239211174226g018xf45om_317x317.jpg" alt="">
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'Broadcast',
  data() {
    return {}
  },
  methods:{
    async getVideo(){
      let data = await this.$API.video.getVideo()
      console.log(data)
    }
  },
  mounted() {
    // 获取视频
    this.getVideo()
  }
}
</script>

<style lang="less" scoped>
.broadcast-title {
  h3 {
    display: inline-block;
    margin-bottom:20px;
    vertical-align: middle;
    font-size: 28px;
    color: #000;
    margin-right: 20px;
  }

  span {
    color: #909399;
    font-size: 16px;
  }
}

.broadcast-room {
  display: flex;
  align-items: center;
  margin-left: -10px;
  margin-right: -10px;
  .broadcast-to {
    display:flex;
    padding-left: 10px;
    flex: 1;
    padding-right: 10px;
    .broadcast-info{
      position: relative;
      width: 100%;
      height: 180px;
      background: pink;
      overflow: hidden;
      &:hover{
        img{
          transform:scale(1.1);
        }
      }
      img{
        width: 100%;
        height: 100%;
        transition:all .5s;
        object-fit: cover;
      }
      .live{
        z-index: 66;
        position:absolute;
        border-radius:15px;
        padding: 3px 5px;
        top: 15px;
        left: 15px;
        width: 65px;
        text-align: center;
        color: #fff;
        background: rgba(0,0,0,.4);
        .small-dots{
          display:inline-block;
          border-radius:50%;
          width: 6px;
          height: 6px;
          background: red;
        }
      }
    }
  }
}
</style>
